
* {
    margin: 0;
    padding: 0;
    font-family: '微软雅黑', 'Microsoft YaHei', 'Microsoft Sans Serif', 'sans-serif', 'serif', 'cursive';
}

@import "define.css";
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
html{
    background: red;
}
body {
    background: #fff;
}

.body {
    flow: horizontal;
}

.connection-list {
    width: 200dip;
    height: calc(100vh - 30dip);
    box-sizing: border-box;
    border-right: 1dip solid @divider;
}

.connection-list .add {
    height: 50dip;
    flow: 1;
    horizontal-align: center;
    vertical-align: middle;
    border-bottom: 1dip solid @divider;
}

.connection-list .c-list {
    width: 100%;
    height: calc(100vh - 82dip);
    overflow: @scroll;
}

.none {
    width: 80%;
    margin: 0 auto;
    padding-top: 30dip;
    text-align: center;
    line-height: center;
    color: @disable;
    font-size: 12dip;
}

.list-item {
    position: relative;
}

.list-item-connected {
    content: 'on';
    position: absolute;
    right: 30dip;
    top: 8dip;
    padding: 2dip 6dip;
    border-radius: 4dip;
    border: 1dip solid @primary;
    font-size: 8dip;
    line-height: 8dip;
    color: @primary;
}

.toggle-item {
    position: relative;
}

.toggle-item .title {
    padding: 0 15dip;
    flow: horizontal;
    border-spacing: *;
    vertical-align: middle;
    height: 30dip;
    box-sizing: border-box;
    border-bottom: 1dip solid @border;
}

.toggle-item .title .title-name {
    width: 150dip;
    height: 30dip;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 30dip;
}

.toggle-item .title:nth-child(0) {
    border-top: none;
}

.toggle-item .title:hover {
    background: @background;
}

.toggle-item .open {
    position: sticky;
    top: 0;
    left: 0;
    color: @primary;
}

.toggle-item .open::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 30dip;
    width: 2dip;
    background: @primary;
}

.folder-action {
    padding: 5dip 15dip;
    flow: horizontal;
    border-spacing: *;
    horizontal-align: center;
    vertical-align: middle;
}

.ac-btn {
    width: 50dip;
    padding: 0;
    font-size: 10dip;
    line-height: 22dip !important;
}

.folder-open {
    border-bottom: 1dip solid @border;
}

.db-item {
    padding: 5dip 15dip;
    cursor: pointer;
    font-size: 12dip;
    position: relative;
}

.db-item:hover {
    background: @background;
}

.db-item:first-child {
    border-top: 1dip solid @border;
}

.db-connected {
    color: @primary;
    background: @background;
}

.db-connected::after {
    content: "使用中";
    line-height: 8dip;
    font-size: 8dip;
    position: absolute;
    right: 15dip;
    top: 50%;
    padding: 2dip 5dip;
    margin-top: -8dip;
    border-radius: 4dip;
    border: 1dip solid @primary;
}

.frame-warp {
    height: calc(100vh - 30dip);
    width: 1*;
}

.no-connect {
    width: 100%;
    height: 100%;
    flow: horizontal;
    horizontal-align: center;
    vertical-align: middle;
    text-align: center;
    color: @content;
}

.tabs {
    width: 100%;
    height: 30dip;
    flow: horizontal;
    border-bottom: 1dip solid @border;
    font-size: 12dip;
    position: relative;
    z-index: 9;
}

.tabs .is-show-conn-list {
    width: 30dip;
    height: 30dip;
    line-height: 30dip;
    text-align: center;
    font-size: 20dip;
    cursor: pointer;
}

.tabs .tab {
    width: 80dip;
    text-align: center;
    height: 30dip;
    line-height: 30dip;
    position: relative;
    cursor: pointer;
}

.tabs .tab-active {
    color: @primary;
    background: @background;
    position: relative;
}

.tabs .tab-active::after {
    content: "";
    position: absolute;
    width: 80dip;
    left: 0;
    bottom: 0dip;
    border-bottom: 1dip solid @primary;
}

.tab-panel {
    width: 100%;
    height: calc(100vh - 60dip);
    overflow: hidden;
}


.tab-panel-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: @scroll;
}

.container {
    padding: 15dip 15dip 0 15dip;
}

.container .block {
    flow: horizontal;
    horizontal-align: left;
    box-sizing: border-box;
    border: 1dip solid @border;
    margin-bottom: 15dip;
    border-radius: 4dip;
    overflow: hidden;
}

.item-icon {
    width: 150dip;
    height: 1*;
    flow: horizontal;
    horizontal-align: center;
    font-size: 50dip;
    background: @background;
}

.item-icon .icon {
    margin-top: *;
    margin-bottom: *;
}

.block .item-list {
    width: 1*;
    flow: horizontal-warp;
    horizontal-align: left;
    vertical-align: top;
    border-left: 1dip solid @border;
}

.block .item-list .row {
    width: 1*;
    flow: horizontal;
    horizontal-align: left;
    padding: 5dip 0;
    border-bottom: 1dip solid @border;
}

.block .item-list .row:last-child {
    border-bottom: none;
}

.block .item-list .row:hover {
    background: @background;
}

.block .item-list .label {
    width: 220dip;
    border-right: 1dip solid @border;
    text-indent: 1em;
}

.block .item-list .text {
    width: 1*;
    text-align: left;
    text-indent: 1em;
}
.block .item-list .database-name{
    width: 100dip;
    height: 1*;
    flow:horizontal;
    horizontal-align:center;
    vertical-align: middle;
    border-right:1dip solid @border;
}
.block .item-list .database-info{
    width: 1*;
    flow:vertical;
    horizontal-align:center;
    vertical-align: middle;
}
.block .item-list .database-info .database-row {
    padding: 5dip 0;
    width: 1*;
    flow:horizontal;
    border-bottom: 1dip solid @border;
}
.block .item-list .database-info .database-row .label{
    width: 120dip;
}
.block .item-list .database-info .database-row:last-child{
    border-bottom: none;
}
@import "data.css";